<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <!-- 
	模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
	对于任何复杂逻辑，你都应当使用计算属性
	如果你不希望有缓存，可以方法来替代
-->
  <div id="app">
    <h3>收货人: {{uname}}</h3>
    <h3>收货地址: {{address}}</h3>
    <h3>当地空气PM25值:{{pm25}}</h3>
    <img :src="pm25img">
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        uname: "dingding",
        province: "浙江",  //省份
        city: "宁波",  //城市          
        county: "江北区", //区县
        addressDetail: "风华路495号",//	详细地址  
        pm25: 201,
      },

      //定义方法
      methods: {
        //方法，所以用法同方法的用法——必须加()
      },

      //定义计算属性
      computed: {
        //属性，所以用法同属性的用法——一定不要不加()
        address() {
          return this.province + this.city + this.county + this.addressDetail;
        },

        pm25img() {
          let index = 0;
          if (this.pm25 < 100) index = 1;
          else if (this.pm25 < 200) index = 2;
          else if (this.pm25 < 300) index = 3;
          else index = 4;
          return `../img/${index}.png`;
        },
      },
    });
      //测试: 在F12->console->vm.pm25 = 330
  </script>
</body>

</html>